<template>
    <div class="archives">
        <div class="time">
            <h3>
                {{ moduleTitle }} <span class="archives-type">（{{ type && typeObj[type] }}）</span>
            </h3>
        </div>
        <article v-for="(item, index) in list" :key="item.id" @click="onArticle(item)">
            <div class="article-con">
                <span><time>{{ item.MMDD }}</time></span>
                <h3>{{ item.title }}</h3>
            </div>
        </article>
        <div v-if="list.length === 0">{{ articleNull }}</div>
    </div>
</template>

<script>
    import { articleNull } from '../../globerConfig'

    export default {
        name: "ArticleList",
        props: {
            articleList: {
                type: Array,
                default: _ => ({})
            },
            moduleTitle: {
                type: String,
                default: '',
            },
            type: {
                type: String,
                default: '',
            }
        },
        watch: {
            articleList: {
                handler (list) {
                    this.list = list.map(item => {
                        let [YY, MM, DD] = item.create_time.split('T')[0].split('-')
                        return {
                            ...item,
                            MMDD: `${MM}-${DD}`
                        }
                    })
                },
                deep: true,
            }
        },
        data () {
            return {
                articleNull,
                list: [],
                typeObj: {
                    category: '分类',
                    tag: '标签',
                },
            }
        },
        methods: {
            onArticle (article) {
                this.$emit('onChange', article)
            },
        }
    }
</script>

<style scoped>
    .archives {
        padding-bottom: 20px;
        margin: auto;
        width: 800px;
        text-align: left;
    }

    .archives-type {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
    }

    .archives .time {
        position: relative;
        margin: 30px 0;
        padding-left: 30px;
        font-size: 16px;
    }

    .archives .time::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ddd;

    }

    .archives article {
        margin-bottom: 20px;
        padding: 10px 0 15px;
        border-bottom: 1px dashed #ccc;
    }

    .archives .article-con {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
    }

    .archives article h3 {
        display: inline-block;
        padding-left: 10px;
        font-weight: 400;
    }

    .archives article time {
        font-size: 12px;
    }

    .article-con::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ddd;
    }

    .archives article:hover {
        border-bottom-color: #333;
    }

    .archives article:hover .article-con::before {
        background-color: #333;
    }
</style>
